<template>
  <PublicPage :pageName="routeData.userType == 2 ? '个人资料' : '速速团账号资料'">
    <view class="personal_page">
      <view class="top-section justify-between">
        <view class="flex-row group_6">
          <text>{{routeData.userType == 2 ? '个人头像' : '账号头像'}}</text>
        </view>
        <view class="flex-row group_7" @click.stop="uploadImgFn(1)">
          <!-- 个人头像 -->
          <image
            v-if="routeData.userType == 2"
            class="personal_head"
            mode="aspectFill"
            :src="userInfo.avatar || 'https://image.qqpyyds.com/mpAppImg/icon/avatar2_icon.png'"
          />
          <!-- 账号logo -->
          <image
            v-if="routeData.userType != 2"
            class="personal_head"
            mode="aspectFill"
            :src="userInfo.communityLogo || 'https://image.qqpyyds.com/mpAppImg/icon/avatar2_icon.png'"
          />
          <image
            src="https://image.qqpyyds.com/mpAppImg/icon/jiantou4_icon.png"
            class="image_8_box"
          />
        </view>
      </view>
      <view class="top-section justify-between">
        <view class="flex-row group_6">
          <text>{{routeData.userType == 2 ? '昵称' : '账号名称'}}</text>
        </view>
        <view class="flex-row group_7" @click.stop="nicknameFn">
          <!-- 昵称 -->
          <text v-if="routeData.userType == 2">{{ userInfo.nickname || '' }}</text>
          <!-- 账号名称 -->
          <text v-if="routeData.userType != 2">{{ userInfo.communityName || '' }}</text>
          <image
            src="https://image.qqpyyds.com/mpAppImg/icon/jiantou4_icon.png"
            class="image_8_box"
          />
        </view>
      </view>
      <view class="top-section justify-between" v-if="routeData.userType != 2">
        <view class="flex-row group_6">
          <text>账号简介</text>
        </view>
        <view class="flex-row group_7" @click.stop="introduceFn">
          <text class="community_desc">{{ userInfo.introduce || "请输入账号简介" }}</text>
          <image
            src="https://image.qqpyyds.com/mpAppImg/icon/jiantou4_icon.png"
            class="image_8_box"
          />
        </view>
      </view>


      <view class="top-section justify-between" v-if="routeData.userType == 2">
        <view class="flex-row group_6">
          <text>手机号</text>
        </view>
        <view class="flex-row group_7">
          <button
            class="mobile_btn"
            hover-class="hover"
            open-type="getPhoneNumber"
            @getphonenumber="getphonenumber"
          >
            {{ userInfo.mobile ? userInfo.mobile : "点击获取手机号码" }}
          </button>
          <image
            src="https://image.qqpyyds.com/mpAppImg/icon/jiantou4_icon.png"
            class="image_8_box"
          />
        </view>
      </view>
      
      <!-- <view class="top-section justify-between">
        <view class="flex-row group_6">
          <text>位置信息</text>
        </view>
        <view class="flex-row group_7" @click.stop="goToMapFn">
          <text>{{ userInfo.location || "请选择位置信息" }}</text>
          <image
            src="https://image.qqpyyds.com/mpAppImg/icon/jiantou4_icon.png"
            class="image_8_box"
          />
        </view>
      </view> -->
      <view class="top-section justify-between" v-if="routeData.userType != 2">
        <view class="flex-row group_6">
          <text>主页背景</text>
        </view>
        <view class="flex-row group_7" @click.stop="uploadImgFn(2)">
          <text>去上传</text>
          <image
            src="https://image.qqpyyds.com/mpAppImg/icon/jiantou4_icon.png"
            class="image_8_box"
          />
        </view>
      </view>
      <view class="user_bg_box" v-if="routeData.userType != 2">
        <image
          class="bg_img"
          mode="aspectFill"
          :src="userInfo.backgroundUrl || 'https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/bgImg/user_bg_img.png'"
        />
        <view class="fz-12">建议上传图片比例为 2:1</view>
      </view>

      <!-- 账号简介修改弹窗 -->
      <u-modal
        v-model="showIntroduceType"
        :showCancelButton="true"
        cancelColor="#969799"
        @confirm="introduceConfirm"
        confirmColor="#E44435"
        title="账号简介"
      >
        <view class="slot-content">
          <scroll-view scroll-y class="textarea_msg">
            <textarea
              class="textarea_box"
              v-model.trim="introduce"
              placeholder-class="place_holder"
              maxlength="200"
              auto-height
              placeholder="请输入简介，最多200个字符。"
            ></textarea>
          </scroll-view>
          <text class="textarea_mun">{{ introduce.length || 0 }}/200</text>
        </view>
      </u-modal>

      <!-- 昵称修改弹窗 -->
      <u-modal
        v-model="showNicknameType"
        :showCancelButton="true"
        cancelColor="#969799"
        @confirm="nicknameConfirm"
        confirmColor="#E44435"
        :title="routeData.userType == 2 ? '昵称' : '账号名称'"
      >
        <view class="slot-content">
          <view class="input_msg">
            <input
              class="input_box"
              v-model.trim="nickname"
              placeholder-class="place_holder"
              :maxlength="routeData.userType == 2 ? 7 : 16"
              :placeholder="routeData.userType == 2 ? '请输入最多7个字符。':'请输入最多16个字符。'"
            />
          </view>
        </view>
      </u-modal>
    </view>
  </PublicPage>
</template>
<script>
import PublicPage from "@/components/publicPage/index.vue";
import { upload } from "../../components/ossutil/ossMult";
import User from "@/api/user.js";

export default {
  name: "editPersonalM",
  components: { PublicPage },
  data() {
    return {
      mapType: false,
      showIntroduceType: false,
      introduce: "",
      showNicknameType: false,
      nickname: "",
      routeData: {},
    };
  },
  computed: {
    userInfo() {
      return this.$store.state.userInfo;
    },
  },
  onLoad(option) {
    this.routeData = option // userType: 1为账号资料 2为个人资料
  },
  onShow() {
    if (this.$store.state.mapData.location && this.mapType) {
      this.mapType = false;
      this.updateMyInfoFn(
        "location",
        this.$store.state.mapData.location +
          this.$store.state.mapData.locationName
      );
    } else {
      this.mapType = false;
    }
  },
  methods: {
    // type 1:修改头像 2:修改账号主页背景
    async uploadImgFn(type) {
      let _this = this;
      const res = await upload(
        { type: "image", number: 1, checkSize: false },
        _this
      );
      if (res.status == "success") {
        if (type == 1) {
          if(this.routeData.userType == 2){ // 个人头像
            this.updateMyInfoFn("avatar", res.data[0].url);
          }else{ // 账号logo
            this.updateMyInfoFn("communityLogo", res.data[0].url);
          }
        }
        if (type == 2) {
          this.updateMyInfoFn("backgroundUrl", res.data[0].url);
        }
      } else {
        return wx.showToast({
          icon: "none",
          mask: true,
          title: res.msg || "上传失败，请重试！",
        });
      }
    },
    // 打开修复名称弹窗
    nicknameFn() {
      this.nickname = this.routeData.userType == 2 ? this.userInfo.nickname : this.userInfo.communityName
      this.showNicknameType = true;
    },
    // 确定修改名称
    nicknameConfirm() {
      this.showNicknameType = true;
      if (!this.nickname) {
        return this.showToast(this.routeData.userType == 2 ? "请输入昵称!" : "请输入账号名称!");
      }
      if ((this.routeData.userType == 2 && this.userInfo.nickname == this.nickname) || (this.routeData.userType != 2 && this.userInfo.communityName == this.nickname)) {
        this.showNicknameType = false;
        return;
      }
      this.updateMyInfoFn(this.routeData.userType == 2 ? "nickname" : "communityName", this.nickname);
    },
    // 打开修改账号简介
    introduceFn() {
      this.introduce = this.userInfo.introduce;
      this.showIntroduceType = true;
    },
    // 确定修改账号简介
    introduceConfirm() {
      this.showIntroduceType = true;
      if (this.userInfo.introduce == this.introduce) {
        this.showIntroduceType = false;
        return;
      }
      this.updateMyInfoFn("introduce", this.introduce);
    },

    // 修改手机号，重新授权start
    getPhoneFn(res) {
      User.bindMobile({
        encryptedData: res.detail.encryptedData,
        iv: res.detail.iv,
      }).then(async (res_) => {
        if (res_.code == 200) {
          this.updateMyInfoFn("mobile", res_.data);
        }
      });
    },
    async getphonenumber(res) {
      const _this = this;
      if (res.detail.errMsg == "getPhoneNumber:ok") {
        wx.checkSession({
          async success() {
            _this.getPhoneFn(res);
          },
          fail() {},
        });
      }
    },
    // 修改手机号，重新授权end

    // 获取地址
    // goToMapFn() {
    //   this.mapType = true;
    //   this.navigateTo({ url: "/pages/map/index" });
    // },


    // 更新信息
    updateMyInfoFn(name, data) {
      let params = {};
      if (name) {
        params = {
          ...params,
          [name]: data,
        };
      }
      User.updateMyInfo(params).then((res) => {
        if (res.code == 200) {
          let userInfo = this.$store.state.userInfo;
          userInfo = {
            ...userInfo,
            [name]: data,
          };
          if (name == "avatar") {
            this.showToast("用户头像设置成功!");
          }
          if (name == "communityLogo") {
            this.showToast("账号logo设置成功!");
          }
          if (name == "nickname") {
            this.showNicknameType = false;
            this.showToast("修改昵称成功!");
          }
          if (name == "communityName") {
            this.showNicknameType = false;
            this.showToast("修改账号名称成功!");
          }
          if (name == "backgroundUrl") {
            this.showToast("账号主页背景设置成功!");
          }
          if (name == "mobile") {
            this.showToast("手机号设置成功!");
          }
          if (name == "introduce") {
            this.showIntroduceType = false;
            this.showToast("账号简介设置成功!");
          }
          this.$store.commit("USERINFO", userInfo);
        }
      });
    },
    

    showToast(title) {
      uni.showToast({
        title: title,
        icon: "none",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.personal_page {
  height: 100%;
  .top-section {
    padding: 28rpx 32rpx;
    background-color: rgb(255, 255, 255);
    font-size: 28rpx;
    align-items: center;
    border-top: solid 1px #EEEEEE;
    .personal_head {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
    }
  }
  .group_6 {
    color: rgb(50, 50, 51);
    white-space: nowrap;
  }
  .group_7 {
    color: rgb(150, 151, 153);
    display: flex;
    align-items: center;
    .text {
      display: inline-block;
      max-width: 480rpx;
      word-wrap: break-word;
      text-align: right;
    }
    .mobile_btn {
      padding: 0;
      margin: 0;
      font-size: 28rpx;
      color: #969799;
    }
    .image_8_box {
      width: 32rpx;
      height: 32rpx;
      flex-shrink: 0;
    }
  }
  .user_bg_box {
    padding: 32rpx;
    background-color: #fff;
    margin-top: 24rpx;
    .bg_img {
      width: 100%;
      height: 342rpx;
      border-radius: 8rpx;
    }
  }
  .slot-content {
    position: relative;
    padding: 32rpx;
    .textarea_msg {
      //position: relative;
      padding: 24rpx 32rpx;
      background: #f7f8fa;
      border-radius: 8px;
      width: 100%;
      height: 240rpx;
      box-sizing: border-box;
    }
    .textarea_mun {
      position: absolute;
      bottom: 32rpx;
      right: 33rpx;
      padding: 0 6rpx;
      background: #f7f8fa;
      color: #969799;
      z-index: 9;
      font-size: 20rpx;
    }
    .input_msg {
      padding: 24rpx 32rpx;
      background: #f7f8fa;
      border-radius: 8px;
    }
    .input_box {
      width: 100%;
      height: 20rpx;
    }
    .textarea_box {
      width: 100%;
      min-height: 192rpx;
      //height: 100%;
    }
    .place_holder {
      color: #c8c9cc;
    }
  }
  .community_desc {
    margin-left: 126rpx;
    @include bov(1)
  }
}
</style>
